<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0,shrink-to-fit=no, viewport-fit=cover">
    <meta name="keywords" content="蓝桥到家">
    <meta name="description" itemprop="description" content="生鲜副食、饮品乳品、鲜花蛋糕">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商家详情</title>
    <link rel="stylesheet" type="text/css" href="../styles/reset.css" />
    <link rel="stylesheet" type="text/css" href="../styles/iconfont/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../styles/shop.css" />
    <link rel="stylesheet" type="text/css" href="../styles/common.css" />
    <script type="text/javascript" src="../js/common.js"></script>
    <script type="text/javascript" src="../js/zepto.min.js"></script>
</head>

<body>
    <div class="wrap">
        <!-- 头部 start -->
        <header class="header_bar">
            <a href="../index.html">
                <div class="header_bar_back"></div>
            </a>
            <div class="header_bar_title">商家主页</div>
        </header>
        <!-- 头部 end -->
        <!-- 商家主页-头部 start -->
        <div class="shop_info">
            <div class="logo">
                <img src="../images/shop/yh.jpg" alt="">
            </div>
            <div class="title">
                <h2>
                    <span>永辉超市-搜秀城店</span>
                    <i class="iconfont icon-yousanjiao"></i>
                </h2>
                <div class="discount">
                    <div>
                        <span class="special">满减</span>
                        <span class="dis_active">满99减98，满199减198</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 商家主页-头部 end -->
        <div class="container">
            <!-- 商品列表 start -->
            <div class="goods">
                <div class="left">
                    <ul>
                        <li class="cur">
                            <span><a href="#A">限量秒杀</a></span>
                        </li>
                        <li>
                            <span><a href="#B">品牌直降</a></span>
                        </li>
                        <li>
                            <span><a href="#C">情满中秋</a></span>
                        </li>
                    </ul>
                </div>
                <div class="right" onscroll="toscroll()">
                    <ul>
                        <li id="A">
                            <h1 class="goodTitle">限量秒杀</h1>
                            <dl>
                                <dd class="good_item">
                                    <img src="../images/goods/qx.jpg" alt="">
                                    <section class="info">
                                        <p class="name">千禧西红柿(500g)</p>
                                        <p class="desc">饭后解腻佳品</p>
                                        <p class="sale">
                                            <span>月售176</span>
                                            <span>好评率96%</span>
                                        </p>
                                        <div class="more">
                                            <div class="price">
                                                <span>￥</span> 6.9
                                            </div>
                                            <div class="action">
                                                <span class="iconfont icon-jian" onclick="changenum('num1','reduce')"></span>
                                                <span class="num" id="num1">1</span>
                                                <span class="iconfont icon-jia" onclick="changenum('num1','add')"></span>
                                            </div>
                                        </div>
                                    </section>
                                </dd>
                                <dd class="good_item">
                                    <img src="../images/goods/gm.jpg" alt="">
                                    <section class="info">
                                        <p class="name">龙须挂面1kg</p>
                                        <p class="desc">居家必备</p>
                                        <p class="sale">
                                            <span>月售100</span>
                                            <span>好评率98%</span>
                                        </p>
                                        <div class="more">
                                            <div class="price">
                                                <span>￥</span> 7.9
                                            </div>
                                            <div class="action">
                                                <span class="iconfont icon-jian" onclick="changenum('num2','reduce')"></span>
                                                <span class="num" id="num2">1</span>
                                                <span class="iconfont icon-jia" onclick="changenum('num2','add')"></span>
                                            </div>
                                        </div>
                                    </section>
                                </dd>
                                <dd class="good_item">
                                    <img src="../images/goods/snh.jpg" alt="">
                                    <section class="info">
                                        <p class="name">收纳盒(喜得龙)</p>
                                        <p class="desc">空间最大化利用</p>
                                        <p class="sale">
                                            <span>月售16</span>
                                            <span>好评率90%</span>
                                        </p>
                                        <div class="more">
                                            <div class="price">
                                                <span>￥</span> 16.9
                                            </div>
                                            <div class="action">
                                                <span class="iconfont icon-jian" onclick="changenum('num3','reduce')"></span>
                                                <span class="num" id="num3">1</span>
                                                <span class="iconfont icon-jia" onclick="changenum('num3','add')"></span>
                                            </div>
                                        </div>
                                    </section>
                                </dd>
                                <dd class="good_item">
                                    <img src="../images/goods/sj.jpeg" alt="">
                                    <section class="info">
                                        <p class="name">消毒湿巾</p>
                                        <p class="desc">75度酒精杀菌</p>
                                        <p class="sale">
                                            <span>月售476</span>
                                            <span>好评率99%</span>
                                        </p>
                                        <div class="more">
                                            <div class="price">
                                                <span>￥</span> 4.9
                                            </div>
                                            <div class="action">
                                                <span class="iconfont icon-jian" onclick="changenum('num4','reduce')"></span>
                                                <span class="num" id="num4">1</span>
                                                <span class="iconfont icon-jia" onclick="changenum('num4','add')"></span>
                                            </div>
                                        </div>
                                    </section>
                                </dd>

                            </dl>
                        </li>
                        <li id="B">
                            <h1 class="goodTitle">品牌直降</h1>
                            <dl>
                                <dd class="good_item">
                                    <img src="../images/goods/jd.jpg" alt="">
                                    <section class="info">
                                        <p class="name">鸡蛋9枚</p>
                                        <p class="desc">产地直采，性价比高</p>
                                        <p class="sale">
                                            <span>月售176</span>
                                            <span>好评率96%</span>
                                        </p>
                                        <div class="more">
                                            <div class="price">
                                                <span>￥</span> 6.5
                                            </div>
                                            <div class="action">
                                                <span class="iconfont icon-jian" onclick="changenum('num5','reduce')"></span>
                                                <span class="num" id="num5">1</span>
                                                <span class="iconfont icon-jia" onclick="changenum('num5','add')"></span>
                                            </div>
                                        </div>
                                    </section>
                                </dd>
                                <dd class="good_item">
                                    <img src="../images/goods/by.jpg" alt="">
                                    <section class="info">
                                        <p class="name">鲍鱼约30g</p>
                                        <p class="desc">鲜活到家</p>
                                        <p class="sale">
                                            <span>月售165</span>
                                            <span>好评率96%</span>
                                        </p>
                                        <div class="more">
                                            <div class="price">
                                                <span>￥</span> 3.9
                                            </div>
                                            <div class="action">
                                                <span class="iconfont icon-jian" onclick="changenum('num6','reduce')"></span>
                                                <span class="num" id="num6">1</span>
                                                <span class="iconfont icon-jia" onclick="changenum('num6','add')"></span>
                                            </div>
                                        </div>
                                    </section>
                                </dd>
                                <dd class="good_item">
                                    <img src="../images/goods/kl.jpg" alt="">
                                    <section class="info">
                                        <p class="name">可口可乐(2L)</p>
                                        <p class="desc">无糖零度</p>
                                        <p class="sale">
                                            <span>月售1769</span>
                                            <span>好评率100%</span>
                                        </p>
                                        <div class="more">
                                            <div class="price">
                                                <span>￥</span> 6.5
                                            </div>
                                            <div class="action">
                                                <span class="iconfont icon-jian" onclick="changenum('num7','reduce')"></span>
                                                <span class="num" id="num7">1</span>
                                                <span class="iconfont icon-jia" onclick="changenum('num7','add')"></span>
                                            </div>
                                        </div>
                                    </section>
                                </dd>
                                <dd class="good_item">
                                    <img src="../images/goods/qc.jpg" alt="">
                                    <section class="info">
                                        <p class="name">芹菜(500g)</p>
                                        <p class="desc">新鲜到家</p>
                                        <p class="sale">
                                            <span>月售100</span>
                                            <span>好评率96%</span>
                                        </p>
                                        <div class="more">
                                            <div class="price">
                                                <span>￥</span> 6.9
                                            </div>
                                            <div class="action">
                                                <span class="iconfont icon-jian" onclick="changenum('num8','reduce')"></span>
                                                <span class="num" id="num8">1</span>
                                                <span class="iconfont icon-jia" onclick="changenum('num8','add')"></span>
                                            </div>
                                        </div>
                                    </section>
                                </dd>

                            </dl>
                        </li>
                        <li id="C">
                            <h1 class="goodTitle">情满中秋</h1>
                            <dl>
                                <dd class="good_item">
                                    <img src="../images/goods/dzx.jpg" alt="">
                                    <section class="info">
                                        <p class="name">阳澄湖大闸蟹(538型)</p>
                                        <p class="desc">3.0公蟹 2.0母蟹</p>
                                        <p class="sale">
                                            <span>月售1176</span>
                                            <span>好评率88%</span>
                                        </p>
                                        <div class="more">
                                            <div class="price">
                                                <span>￥</span> 666
                                            </div>
                                            <div class="action">
                                                <span class="iconfont icon-jian" onclick="changenum('num9','reduce')"></span>
                                                <span class="num" id="num9">1</span>
                                                <span class="iconfont icon-jia" onclick="changenum('num9','add')"></span>
                                            </div>
                                        </div>
                                    </section>
                                </dd>
                                <dd class="good_item">
                                    <img src="../images/goods/dzx.jpg" alt="">
                                    <section class="info">
                                        <p class="name">阳澄湖大闸蟹(313型)</p>
                                        <p class="desc">4.0公蟹 4.0母蟹</p>
                                        <p class="sale">
                                            <span>月售176</span>
                                            <span>好评率68%</span>
                                        </p>
                                        <div class="more">
                                            <div class="price">
                                                <span>￥</span> 999
                                            </div>
                                            <div class="action">
                                                <span class="iconfont icon-jian" onclick="changenum('num10','reduce')"></span>
                                                <span class="num" id="num10">1</span>
                                                <span class="iconfont icon-jia" onclick="changenum('num10','add')"></span>
                                            </div>
                                        </div>
                                    </section>
                                </dd>
                                <dd class="good_item">
                                    <img src="../images/goods/dzx.jpg" alt="">
                                    <section class="info">
                                        <p class="name">阳澄湖大闸蟹(888型)</p>
                                        <p class="desc">3.5公蟹 2.5母蟹</p>
                                        <p class="sale">
                                            <span>月售111</span>
                                            <span>好评率98%</span>
                                        </p>
                                        <div class="more">
                                            <div class="price">
                                                <span>￥</span> 708
                                            </div>
                                            <div class="action">
                                                <span class="iconfont icon-jian" onclick="changenum('num11','reduce')"></span>
                                                <span class="num" id="num11">1</span>
                                                <span class="iconfont icon-jia" onclick="changenum('num11','add')"></span>
                                            </div>
                                        </div>
                                    </section>
                                </dd>
                                <dd class="good_item">
                                    <img src="../images/goods/dzx.jpg" alt="">
                                    <section class="info">
                                        <p class="name">阳澄湖大闸蟹(1188型)</p>
                                        <p class="desc">4.5公蟹 4.0母蟹</p>
                                        <p class="sale">
                                            <span>月售76</span>
                                            <span>好评率88%</span>
                                        </p>
                                        <div class="more">
                                            <div class="price">
                                                <span>￥</span> 948
                                            </div>
                                            <div class="action">
                                                <span class="iconfont icon-jian" onclick="changenum('num12','reduce')"></span>
                                                <span class="num" id="num12">1</span>
                                                <span class="iconfont icon-jia" onclick="changenum('num12','add')"></span>
                                            </div>
                                        </div>
                                    </section>
                                </dd>
                                <dd class="good_item">
                                    <img src="../images/goods/dxc.jpg" alt="">
                                    <section class="info">
                                        <p class="name">稻香村月饼礼盒(A型)</p>
                                        <p class="desc">4蛋黄 2莲蓉 3枣泥</p>
                                        <p class="sale">
                                            <span>月售76</span>
                                            <span>好评率88%</span>
                                        </p>
                                        <div class="more">
                                            <div class="price">
                                                <span>￥</span> 108
                                            </div>
                                            <div class="action">
                                                <span class="iconfont icon-jian" onclick="changenum('num13','reduce')"></span>
                                                <span class="num" id="num13">1</span>
                                                <span class="iconfont icon-jia" onclick="changenum('num13','add')"></span>
                                            </div>
                                        </div>
                                    </section>
                                </dd>
                                <dd class="good_item">
                                    <img src="../images/goods/dxc.jpg" alt="">
                                    <section class="info">
                                        <p class="name">稻香村月饼礼盒(B型)</p>
                                        <p class="desc">3蛋黄 1莲蓉 4枣泥</p>
                                        <p class="sale">
                                            <span>月售72</span>
                                            <span>好评率88%</span>
                                        </p>
                                        <div class="more">
                                            <div class="price">
                                                <span>￥</span> 98
                                            </div>
                                            <div class="action">
                                                <span class="iconfont icon-jian" onclick="changenum('num14','reduce')"></span>
                                                <span class="num" id="num14">1</span>
                                                <span class="iconfont icon-jia" onclick="changenum('num14','add')"></span>
                                            </div>
                                        </div>
                                    </section>
                                </dd>
                            </dl>
                        </li>


                    </ul>
                </div>
            </div>
            <!-- 商品列表 end -->
        </div>
    </div>
    <!--去结算 start-->
    <div class="cart">
        <div class="cart_info">
            <div class="carlogo">
                <span class="iconfont icon-gouwuche">   <i class="count">1</i></span>

            </div>
            <div class="price">
                <div class="noShop">
                    <p style="color: #fff;font-size: 0.3rem;">总计：101 元</p>
                </div>
            </div>
            <div class="account" onclick="location.href='/pages/order-confirm.html'">去结算</div>
        </div>
        <!--去结算 end-->
</body>

<script>
    //数量加减
    function changenum(numid, action) {
        let numitem = $('#' + numid);
        if (action == 'reduce') {
            numitem.text(parseInt(numitem.text()) == 0 ? 0 : (parseInt(numitem.text())) - 1);
        } else {
            numitem.text((parseInt(numitem.text())) + 1);
        }
    }
    //右侧滑动
    function toscroll() {
        var titles = $('.goodTitle');
        for (var i = 0; i < titles.length; i++) {
            var style = titles[i].getBoundingClientRect();
            if (style.top == 182) {
                $($(".left ul li")[i]).addClass('cur').siblings().removeClass('cur');
            }
        }
    }
</script>

</html>